<template>
  <div class="alert-swiper">
    <div class="alert-title">企业需求</div>
    <div class="alert-background">
      <!-- <div
        v-for="(item, index) in requirements"
        :key="index"
        class="alert-item"
        
      >
          <div class="fs14 ml30 color-primary row-start">
              <div class="fwbold">【{{ item.requirementTypeName }}】</div><div>{{ item.requirement }}</div><div class="ml10">{{item.budget ? `( 预算金额${item.budget}元 )` : '( 服务商报价 )'}}</div>
          </div>
      </div> -->
        <el-carousel height="40px" direction="horizontal" indicator-position="none" :autoplay="true">
          <el-carousel-item v-for="item in requirements" :key="item.requirementId" class="alert-item">
              <div class="fs14 ml30 color-primary row-start">
                  <div class="fwbold">【{{ item.requirementTypeName }}】</div><div>{{ item.requirement }}</div><div class="ml10">{{item.budget ? `( 预算金额${item.budget}元 )` : '( 服务商报价 )'}}</div>
              </div>
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="mr30 fixed-button">
        <button type="button" class="text-button" @click="reviewItem()">查看需求详情 >></button>
    </div>
  </div>
</template>

<script>
import { requirementPage } from '@/api/homeApi'; // Adjust the import path as necessary

export default {
  name: 'AlertSwiper',
  data() {
    return {
      requirements: [],
    };
  },
  mounted() {
    this.fetchRequirements();
  },
  methods: {
    fetchRequirements() {
      requirementPage({ pageNo: 1, pageNum: 100, status:1 }).then((res) => {
        if (res.code === 200) {
          this.requirements = res.rows;
        }
      });
    },
    reviewItem(item) {
      this.$router.push({ name: '企业需求列表' });
    },
  },
};
</script>

<style scoped>
.alert-swiper {
  overflow: hidden;
  height: 60px; /* Adjust height as needed */
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(240, 243, 255, 1); /* Set the background color */
  position: relative;
  border: 1px solid rgba(67, 106, 247, 1);
}

.alert-background {
  height: 100%;
  overflow: hidden;
  margin-left: 160px;
  margin-right: 160px;
  display: flex;
}


.alert-item {
  height: 40px; /* Ensure each item has the same height as the container */
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  animation-delay: 5s; /* Start the animation immediately */
  margin-left: 160px;
}

@keyframes scroll {
  0% {
    transform: translateX(100%); /* Start from the right */
  }
  100% {
    transform: translateX(-100%); /* Scroll to the left */
  }
}


.text-button {
  background: none;
  border: none;
  color: #436AF7;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}
.fixed-button {
  position: absolute;
  right: 0;
  top: 10px;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.alert-title{
  width: 148px;
  height: 40px;
  background-image: url('~@/assets/image/requieBg.png');
  background-size: 100% 100%;
  line-height: 40px;
  position: absolute;
  left: 10px;
  top: 10px;
  color: #fff;
  padding-left: 60px;
}
</style>